<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta property="og:title" content="拼多多商城">
    <meta property="og:description" content="风靡全国的拼团商城，优质商品新鲜直供，快来一起拼多多吧">
    <!-- <meta property="og:image" content="https://funimg.pddpic.com/base/logo.jpg"> -->
    <title>收货地址</title>
    <link rel="stylesheet" href="static/css/picker.css" />
    <link href="static/css/react_common_policy_pv_2_f8ec332d1cf5f5132353.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/pop.css" />
    <link rel="stylesheet" href="static/css/address.css" />
    <style>
        .popbox {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            /* display: none; */
        }

        .popbox .iptbox {
            width: 60%;
            height: 1.5rem;
            background-color: #fff;
            border-radius: 0.08rem;
            margin: 0 auto;
            margin-top: 1rem;
            text-align: center;
        }

        .popbox .iptbox .lable {
            text-align: center;
            padding: 0.2rem 0 0.1rem 0;
        }

        .popbox .iptbox .popipt {
            width: 90%;
            height: 0.28rem;
            text-align: center;
            margin: 0 auto;
            border-radius: 0.08rem;
            border: 1px solid rgb(206, 206, 206);
        }

        .popbox .iptbox .popbtn {
            width: 90%;
            height: 0.28rem;
            margin: 0.15rem auto 0 auto;
            border-radius: 0.08rem;
            border: 1px solid rgb(206, 206, 206);
        }

        .clearcookie {
            width: 90%;
            height: 0.3rem;
            line-height: 0.3rem;
            background-color: red;
            color: white;
            text-align: center;
            margin: 0 auto;
            border-radius: 0.08rem;
            display: none;
        }
    </style>
</head>

<body>
    <div class="androidstatus">
        <div class="topstatus">
            <div class="timer" contenteditable></div>
            <div class="right">
                <img src="./imgs/android_clock.png" alt="" srcset="" class="clock">
                <img src="./imgs/android_wifi.png" alt="" srcset="" class="wifi">
                <img src="./imgs/android_xinhao.png" alt="" srcset="" class="xinhao">
                <img src="./imgs/android_cell.png" alt="" srcset="" class="cell">
            </div>
        </div>
    </div>
    <div class="applestatus">
        <div class="topstatus2">
            <div class="timer" contenteditable></div>
            <div class="right">
                <img src="./imgs/apple.png" alt="" srcset="" class="location">
            </div>
        </div>
    </div>
    <script>
        var obj = new Date();
        var hour = obj.getHours().toString();
        if (hour.length == 1) {
            hour = '0' + hour
        }
        var minute = obj.getMinutes().toString();
        if (minute.length == 1) {
            minute = '0' + minute
        }
        var timer = hour + ':' + minute;
        // console.log(timer)
        var timedom = document.getElementsByClassName('timer')[0]
        var timedom2 = document.getElementsByClassName('timer')[1]
        // console.log(timedom)
        timedom.innerText = timer
        timedom2.innerText = timer
    </script>

    <div id="main">
        <div class="_6HW5wT_U">
            <ul class="_14NcUy67">
                <li class="">
                    <div class="_3coebd1Z">
                        <div class="_2_0dheVP" contenteditable>
                            <div class="_36kbD6b9">柯帆
                                <!-- -->，
                                <!-- -->13014145511</div>
                            <div class="_13ERsunU">河南省
                                <!-- -->&nbsp;
                                <!-- -->郑州市
                                <!-- -->&nbsp;
                                <!-- -->金水区
                                <!-- -->&nbsp;
                                <!-- -->民航路 盛润国际广场东座<div class="_1x9t3xYb"></div>
                            </div>
                        </div>
                        <div class="_103nZOHe _1I8edC9L"></div>
                    </div>
                    <div class="_1IHYEziR"></div>
                    <div class="_1Fi2Bh8C">
                        <div class="_2JCRQ_Qd" onclick="dodefault(this)">
                            <span class="_1an0ZVkc _3cP_yrD0">
                                <span class="_1ggbxb5s">已设为默认</span>
                            </span>
                        </div>
                        <div class="_1EefHiaF">
                            <div class="_3hy8GZql" onclick="goone(this)"><span>置顶</span></div>
                            <div class="_2jpwbK2G" onclick="deleteli(this)"><span>删除</span></div>
                            <div class="_3w9DbMXk"><span>修改</span></div>
                        </div>
                    </div>
                </li>
                <li class="">
                    <div class="_3coebd1Z">
                        <div class="_2_0dheVP" contenteditable>
                            <div class="_36kbD6b9">柯帆
                                <!-- -->，
                                <!-- -->13014145511</div>
                            <div class="_13ERsunU">河南省
                                <!-- -->&nbsp;
                                <!-- -->郑州市
                                <!-- -->&nbsp;
                                <!-- -->金水区
                                <!-- -->&nbsp;
                                <!-- -->民航路 盛润国际广场东座<div class="_1x9t3xYb"></div>
                            </div>
                        </div>
                        <div class="_103nZOHe _1I8edC9L"></div>
                    </div>
                    <div class="_1IHYEziR"></div>
                    <div class="_1Fi2Bh8C">
                        <div class="_2JCRQ_Qd" onclick="dodefault(this)">
                            <span class="_1an0ZVkc">
                                <span class="_1ggbxb5s">设为默认</span>
                            </span>
                        </div>
                        <div class="_1EefHiaF">
                            <div class="_3hy8GZql" onclick="goone(this)"><span>置顶</span></div>
                            <div class="_2jpwbK2G" onclick="deleteli(this)"><span>删除</span></div>
                            <div class="_3w9DbMXk"><span>修改</span></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="_3qPKhpy0 HKLktHJa">
                <div class="_3Q-8HJBN _1mJF-1Uf" data-active="red" onclick="openpop()">
                    <span>
                        <div class="_24YSua2r">添加收货地址</div>
                    </span>
                </div>
            </div>
        </div>
        <div class="clearcookie" onclick="doclear()">获取地址列表失败,点击重试</div>
    </div>
    <!-- 新增弹窗 -->
    <div class="jPB1u7d8">
        <div class="_3sOFMl4c"></div>
        <div class="_3W0iZ9uG m-addr-main m-addr-main-new ios">
            <div class="m5ozkA7a icon" onclick="closepop()"></div>
            <div class="title-wrap-new">
                <div class="m-addr-title">添加收货地址</div>
            </div>
            <div class="m-addr-bar"><input class="m-addr-input " id="name" placeholder="收货人姓名" type="text" value="">
                <div class="m-addr-text">收货人</div>
            </div>
            <div class="m-addr-bar"><input class="m-addr-input " id="mobile" placeholder="收货人手机号" type="tel" value="">
                <div class="m-addr-text">手机号</div>
            </div>
            <div class="m-addr-region-new" data-active="cell-white" onmousedown="openpicker()" onclick="openpicker()">
                <span class="m-addr-region-text m-addr-region-placeholder" id='city-picker'>点击选择</span>
                <!-- <input type='text' class="m-addr-region-text m-addr-region-placeholder" data-active="cell-white" id='city-picker' placeholder='请选择省市区县' /> -->

                <div class="m-addr-text">地区</div>
            </div>
            <div class="m-addr-address-none m-addr-address-new">
                <div class="m-addr-address-text">详细地址</div><textarea id="address" placeholder="如街道、门牌号、小区、乡镇、村等"
                    class="m-addr-textarea   "></textarea>
                <div class="position-icon inactive"></div>
            </div>
            <div class="m-addr-save-new active" onclick="dosave()"><span>保存</span></div>
        </div>
    </div>

    <div class="popbox">
        <div class="iptbox">
            <div class="lable">请输入用户名</div>
            <input type="text" class="popipt">
            <button class="popbtn" onclick="dosetuser()">确定</button>
        </div>
    </div>


    <script src="./static/js/jquery.js"></script>
    <script src="./static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="./static/js/picker.js"></script>
    <script type="text/javascript" src="./static/js/city.js"></script>
    <script>
        var getaddresslist = "http://app.letuilm.com/api/get_address_list"
        var dosaveurl = "http://app.letuilm.com/api/add_address"
        var delteurl = "http://app.letuilm.com/api/del_address"
        var username = ''
        var isdefault = "设为默认"
        var addresslist = []
        var arealist = []
        // console.log('defaultli', defaultli)
        // console.log(geturl('id'))
        if (geturl('id') == '2') {
            $('.androidstatus')[0].style.display = 'none'
        } else {
            $('.applestatus')[0].style.display = 'none'
        }
        if ($.cookie('username')) {
            // console.log($.cookie('username'))
            username = $.cookie('username')
            getaddress()
            $('.popbox')[0].style.display = "none"
        }
        function getaddress() {
            // console.log('userc',userc)
            $.ajax({
                url: getaddresslist,
                type: 'post',
                data: {
                    user: username,
                    // user: '',
                },
                // dataType: 'json',
                timeout: 3000,
                // contentType:"application/json",
                success: function (res) {
                    if (res.code == 200) {
                        // console.log('地址列表', res)
                        addresslist = res.data
                        console.log('addresslist', addresslist)
                        doRendering()
                    } else {
                        $('.clearcookie')[0].style.display = 'block'
                    }
                },
                //异常处理
                error: function (err) {
                    console.log(err);
                    $('.clearcookie')[0].style.display = 'block'
                }
            })
        }
        function dosetuser() {
            console.log($('.popipt')[0].value)
            let user = $('.popipt')[0].value
            $.cookie('username', user)
            username = user
            $('.popbox')[0].style.display = "none"
            getaddress();
        }
        function doclear() {
            $.removeCookie('username')
            $('.popbox')[0].style.display = 'block'
        }
        function geturl(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        function doRendering() {
            let str = ''
            for (let i = 0; i < addresslist.length; i++) {
                str += `  <li class="">
                    <div class="_3coebd1Z">
                        <div class="_2_0dheVP" contenteditable>
                            <div class="_36kbD6b9">` + addresslist[i].consignee + `
                                <!-- -->，
                                <!-- -->` + addresslist[i].phone + `</div>
                            <div class="_13ERsunU">` + addresslist[i].province + `
                                <!-- -->&nbsp;
                                <!-- -->` + addresslist[i].city + `
                                <!-- -->&nbsp;
                                <!-- -->` + addresslist[i].area + `
                                <!-- -->&nbsp;
                                <!-- -->` + addresslist[i].detail + `<div class="_1x9t3xYb"></div>
                            </div>
                        </div>`
                if (addresslist[i].is_default == 2) {
                    str += `<div class="_103nZOHe _1I8edC9L" onclick="gouse(` + addresslist[i].id + `,this)"></div>`
                } else {
                    str += `<div class="_103nZOHe  eSUbi3T3"  onclick="gouse(` + addresslist[i].id + `,this)"></div>`
                }
                str += `</div>
                    <div class="_1IHYEziR"></div>
                    <div class="_1Fi2Bh8C">
                        <div class="_2JCRQ_Qd" onclick="dodefault(this)">`
                if (addresslist[i].is_default == 2) {
                    str += `<span class="_1an0ZVkc _3cP_yrD0"><span class="_1ggbxb5s">已设为默认</span></span>`
                } else {
                    str += `<span class="_1an0ZVkc"><span class="_1ggbxb5s">设为默认</span></span>`
                }
                str += `</div>
                        <div class="_1EefHiaF">
                            <div class="_3hy8GZql" onclick="goone(this)"><span>置顶</span></div>
                            <div class="_2jpwbK2G" onclick="deleteli(this,` + addresslist[i].id + `)"><span>删除</span></div>
                            <div class="_3w9DbMXk"><span>修改</span></div>
                        </div>
                    </div>
                </li>`
            }
            $('._14NcUy67').html(str)


        };
        function gouse(item, e) {
            console.log(item, e)
            let defaultli = document.getElementsByClassName('_103nZOHe')
            // console.log(defaultli)
            for (var i = 0; i < defaultli.length; i++) {
                defaultli[i].className = '_103nZOHe  eSUbi3T3'
            }
            // console.log(e)
            e.className = '_103nZOHe _1I8edC9L'
            if (geturl('id') == '2') {
                window.location.href = "./apple.html?id=" + item;
            } else {
                window.location.href = "./android.html?id=" + item;
            }
        };
        function deleteli(e, id) {
            console.log(e.parentNode.parentNode.parentNode, id)
            let parentNode = e.parentNode.parentNode.parentNode
            parentNode.remove()
            $.ajax({
                url: delteurl,
                type: 'post',
                data: {
                    id: id,
                },
                // dataType: 'json',
                timeout: 3000,
                // contentType:"application/json",
                success: function (res) {
                    console.log(res)
                },
                //异常处理
                error: function (err) {
                    console.log(err);
                }
            })

        };

        function dodefault(e) {
            var defaultli = document.getElementsByClassName('_2JCRQ_Qd')
            for (var i = 0; i < defaultli.length; i++) {
                defaultli[i].children[0].className = '_1an0ZVkc'
                defaultli[i].children[0].children[0].innerText = '设为默认'
            }
            console.log(e)
            e.children[0].className += ' _3cP_yrD0'
            e.children[0].children[0].innerText = '已设为默认'
            console.log('defaultli', defaultli)
        };

        function goone(e) {
            // console.log(e.parentNode.parentNode.parentNode)
            let self = e.parentNode.parentNode.parentNode
            let last = e.parentNode.parentNode.parentNode.parentNode.children[0]
            exchange(self, last)
        };

        function exchange(el1, el2) {
            var ep1 = el1.parentNode,
                ep2 = el2.parentNode,
                index1 = Array.prototype.indexOf.call(ep1.children, el1),
                index2 = Array.prototype.indexOf.call(ep2.children, el2);
            ep2.insertBefore(el1, ep2.children[index2]);
            ep1.insertBefore(el2, ep1.children[index1]);
        }

        function closepop() {
            // console.log($('.jPB1u7d8')[0].style)
            $('.jPB1u7d8')[0].style.display = 'none'
        };

        function openpop() {
            // console.log($('.jPB1u7d8')[0].style)
            $('.jPB1u7d8')[0].style.display = 'block'
        };

        function dosave() {
            // console.log($('#name'))
            let name = $('#name')[0].value
            let mobile = $('#mobile')[0].value
            let address = $('#address')[0].value
            $.ajax({
                url: dosaveurl,
                type: 'post',
                data: {
                    user: user,
                    province: arealist[0], //省
                    city: arealist[1], //市,
                    area: arealist[2], //区
                    detail: address, //详情地区
                    consignee: name, //收货人
                    phone: mobile, //联系方式
                },
                // dataType: 'json',
                timeout: 3000,
                // contentType:"application/json",
                success: function (res) {
                    console.log('新增成功', res)
                    $('#name')[0].value = ""
                    $('#mobile')[0].value = ""
                    $('#address')[0].value = ""
                    $('#city-picker').text('点击选择')
                    closepop()
                    getaddress()
                },
                //异常处理
                error: function (err) {
                    console.log(err);
                }
            })
        };

        function openpicker() {
            $("#city-picker").cityPicker({
                title: "选择省市区/县",
                onChange: function (picker, values, displayValues) {
                    // console.log(values, displayValues);
                    // console.log(displayValues.join(' '))
                    arealist = displayValues
                    $('#city-picker').text(displayValues.join(' '))
                }
            });
        }
    </script>


</body>

</html>